<template>
<div>
    <el-row>
        <el-col :span="12">
            <el-button plain type="success" style="margin:10px 0" @click="submitUpload">确定导入</el-button>
            <span style="padding:0 10px">{{this.fileName!=''?"已上传文件"+this.fileName:''}}</span>
            
            <br><el-link href="https://msjava.oss-cn-qingdao.aliyuncs.com/2022/03/30/students.xls" type="success">学生信息导入模板</el-link>
            <el-upload
                ref="upload"
                class="upload-demo"
                drag
                :before-upload="beforeUpload"
                :on-remove="handleRemove1"
                :limit='1'
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将学生信息文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传xls文件</div>
            </el-upload>
        </el-col>
        <el-col :span="12">
            <el-button plain type="success" style="margin:10px 0" @click="submitUpload2">确定导入</el-button>
            <span style="padding:0 10px">{{this.fileName2!=''?"已上传文件"+this.fileName2:''}}</span>
            
            <br><el-link href="https://msjava.oss-cn-qingdao.aliyuncs.com/2022/03/30/teachers.xls" type="success">老师信息导入模板</el-link>
            <el-upload
                ref="upload"
                class="upload-demo"
                drag
                :before-upload="beforeUpload2"
                :limit='1'
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将老师信息文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传xls文件</div>
            </el-upload>
        </el-col>
    </el-row>

</div>
</template>

<script>
export default {
    data(){
        return{
            fileName:'',
            file:null,
            fileName2:'',
            file2:null,
        }
    },
    methods:{

    handleRemove1() {
        this.file = null
        this.fileName = ''
      },
        beforeUpload(file){
            const extension = file.name.split('.')[1] === 'xls'
            const extension2 = file.name.split('.')[1] === 'xlsx'
            if (!extension && !extension2) {
                this.$message.warning('上传模板只能是 xls、xlsx格式!')
            return
            }
            this.fileName = file.name;
            this.file = file
            // return false // 返回false不会自动上传
        },
        async submitUpload() {
            if(this.fileName == ""){
                this.$message.warning('请选择要上传的文件！')
                return false
            }

            let formData = new window.FormData();
            formData.append("file", this.file);
            formData.append("name", this.fileName);


            // // console.log(formData.get("name"))
            // // console.log(formData.get("file"))
            let result =
            await this.$API.people_management.getStudentFromExcelAndStorage(formData)
            if (result.code == 20000) {
                this.$message({
                    showClose: true,
                    message: '导入成功',
                    type: 'success'
                    });
            }
            else{
                this.$message({
                    showClose: error,
                    message: '导入失败',
                    type: 'success'
                    });
            }
    
        },

        beforeUpload2(file){
            const extension = file.name.split('.')[1] === 'xls'
            const extension2 = file.name.split('.')[1] === 'xlsx'
            if (!extension && !extension2) {
                this.$message.warning('上传模板只能是 xls、xlsx格式!')
            return
            }
            this.fileName2 = file.name;
            this.file2 = file
            // return false // 返回false不会自动上传
        },
        async submitUpload2() {
            if(this.fileName2 == ""){
                this.$message.warning('请选择要上传的文件！')
                return false
            }

            let formData = new window.FormData();
            formData.append("file", this.file2);
            formData.append("name", this.fileName2);

            let result =
            await this.$API.people_management.getStudentFromExcelAndStorage(formData)
            if (result.code == 20000) {
                this.$message({
                    showClose: true,
                    message: '导入成功',
                    type: 'success'
                    });
            }
            else{
                this.$message({
                    showClose: error,
                    message: '导入失败',
                    type: 'success'
                    });
            }
    
    }
}
}
</script>

<style>

</style>